<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>确认订单</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
          rel="stylesheet">
    <link href="../../assetsimages/x-icon/agricul.png" rel="shortcut icon" type="image/x-icon">
    <link href="../../assets/css/relys/animate.css" rel="stylesheet">
    <link href="../../assets/css/relys/bootstrap.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/all.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/icofont.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/lightcase.css" rel="stylesheet">
    <link href="../../assets/css/relys/swiper.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/style.css" rel="stylesheet">
    <style type="text/css">
        .cart-checkout-box button, .address-btn-box button {
            padding: 11px 30px;
            border: 1px solid #f0f0f0;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            font-size: 16px;
            border: none;
            background: #ffb11f;
            color: #fff;
            outline: none;
            border: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- Page Header Section Start Here -->
    <section class="page-header bg_img padding-tb">
        <div class="overlay"></div>
        <div class="container">
            <div class="page-header-content-area">
                <h4 class="ph-title">确认订单</h4>
                <ul class="agri-ul">
                    <li><a href="index.html">首页</a></li>
                    <li><a class="active">确认订单</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- Page Header Section Ending Here -->


    <!-- Shop Cart Page Section start here -->
    <div class="shop-cart padding-tb">
        <div class="container">
            <div class="section-wrapper">
                <div class="cart-top">
                    <h4>地址列表</h4>
                    <ul style="list-style: none;">
                        <li style="line-height: 30px;" v-for="item in addressList">
                            <input :value="item.address" name="address" type="radio" v-model="address"/>
                            {{item.name}} {{item.phone}} {{item.address}}
                        </li>
                    </ul>
                    <div class="address-btn-box">
                        <button @click="onPageTap('../address/address-edit.html')" class="btn_1"
                                style="margin-top:20px;">新增收货地址
                        </button>
                    </div>
                </div>
                <div class="cart-top">
                    <h4>订单详细</h4>
                    <table>
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>价格</th>
                            <th>数量</th>
                            <th>总价</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, i) in orderGoods">
                            <td class="product-item" style="display: flex;">
                                <!-- <input type="checkbox" name="cart" style="margin-right: 10px;" /> -->
                                <div class="p-thumb">
                                    <img :src="item.picture" alt="product"
                                         style="width: 85px;height: 85px;object-fit: cover;">
                                </div>
                                <div class="p-content" style="width: auto;">
                                    <a href="#">{{item.goodname}}</a>
                                </div>
                            </td>
                            <td>￥{{item.price}}</td>
                            <td>
                                <div class="cart-plus-minus">
                                    <input :value="item.buynumber" class="cart-plus-minus-box"
                                           name="qtybutton" readonly="readonly" style="background-color: #f8f8f8;"
                                           type="text">
                                </div>
                            </td>
                            <td>￥{{item.price * item.buynumber}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="cart-checkout-box" style="float: right;">
                    <h5>总价：<span style="color: red;">￥{{totalPrice}}</span></h5>
                    <button @click="onOrderTap">立即支付</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Shop Cart Page Section ending here -->
</div>
</body>
<script src="../../assets/js/relys/jquery.js"></script>
<script src="../../assets/js/relys/fontawesome.min.js"></script>
<script src="../../assets/js/relys/waypoints.min.js"></script>
<script src="../../assets/js/relys/bootstrap.min.js"></script>
<script src="../../assets/js/relys/wow.min.js"></script>
<script src="../../assets/js/relys/swiper.min.js"></script>
<script src="../../assets/js/relys/jquery.countdown.min.js"></script>
<script src="../../assets/js/relys/jquery.counterup.min.js"></script>
<script src="../../assets/js/relys/isotope.pkgd.min.js"></script>
<script src="../../assets/js/relys/lightcase.js"></script>
<script src="../../assets/js/relys/vue.js"></script>
<!-- 异步请求 -->
<script src="../../assets/js/api/api.js"></script>
<!-- 工具类 -->
<script src="../../assets/js/relys/utils.js"></script>
<!-- 用户接口 -->
<script src="../../assets/js/api/defaultuser.js"></script>
<!-- 购物车 -->
<script src="../../assets/js/api/shop-cart.js"></script>
<!-- 地址接口 -->
<script src="../../assets/js/api/shop-address.js"></script>
<!-- 订单接口 -->
<script src="../../assets/js/api/order.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            orderGoods: [],
            totalPrice: 0,
            addressList: [],
            user: {},
            address: '',
        },
        created() {
            var _this = this;
            var orderGoods = JSON.parse(localStorage.getItem('orderGoods'));
            this.orderGoods = orderGoods;
            var totalPrice = 0;
            for (var i = 0; i < orderGoods.length; i++) {
                totalPrice += parseFloat(orderGoods[i].price) * parseFloat(orderGoods[i].buynumber);
            }
            this.totalPrice = totalPrice;
            addressList(1, 100, function (res) {
                _this.addressList = res.data.list
            });
            var user = localStorage.getItem("sessionTable")
            session(`${user}`, function (res) {
                _this.user = res.data
            });
        },
        methods: {
            onPageTap(url) {
                window.location.href = url
            },
            onOrderTap() {
                let _this = this;
                var msg = ""
                var status = ""
                if (!_this.address) {
                    alert('请选择收货地址');
                    return
                }
                if (_this.user.money < _this.totalPrice) {
                    msg = "账户余额不足"
                    status = "未支付"
                } else {
                    msg = "支付成功"
                    status = "已支付"
                    _this.user.money = _this.user.money - _this.totalPrice;
                    var user = localStorage.getItem("sessionTable")
                    updateUser(`${user}`, _this.user, function () {
                    });
                }

                for (let i = 0; i < _this.orderGoods.length; i++) {
                    ordersSave({
                        orderid: genTradeNo(),
                        tablename: _this.orderGoods[i].tablename,
                        userid: _this.user.id,
                        goodid: _this.orderGoods[i].goodid,
                        goodname: _this.orderGoods[i].goodname,
                        picture: _this.orderGoods[i].picture,
                        buynumber: _this.orderGoods[i].buynumber,
                        discountprice: _this.orderGoods[i].price,
                        price: _this.orderGoods[i].price,
                        total: _this.orderGoods[i].price * _this.orderGoods[i].buynumber,
                        discounttotal: _this.orderGoods[i].price * _this.orderGoods[i].buynumber,
                        type: 1,
                        address: _this.address,
                        status: status
                    }, function (res) {
                        if (_this.orderGoods[i].id) {
                            localStorage.removeItem(`cart${_this.orderGoods[i].goodid}`)
                            cartDelete([_this.orderGoods[i].id], function (res) {
                                if (i == _this.orderGoods.length - 1) {
                                    alert(`${msg}`);
                                    window.location.href = '../order/order-list.html'
                                }
                            })
                        } else {
                            if (i == _this.orderGoods.length - 1) {
                                alert(`${msg}`);
                                window.location.href = '../order/order-list.html'
                            }
                        }
                    });
                }
            }
        }
    })
</script>
</html>
